<template>
  <div class="ai_pose">
    <HeaderBar title="REMOVE" @back="router.back()" />
    <div class="title">Choose a pose</div>
    <!-- 轮播 -->
    <div class="swiper_wrap">
      <van-swipe ref="swipeRef" :width="108" :loop="true" @change="onChange" :show-indicators="false"
        class="swipe-container">
        <van-swipe-item v-for="(item, index) in images" :key="index"
          :class="{ activeItemStyle: currentIndex === index }">
          <div class="image-wrapper" :style="{ marginRight: index < images.length - 1 ? '8px' : '0' }">
            <img :src="item" class="swipe-image" />
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 勾选 -->
    <div class="select_checkbox_wrap">
      <van-checkbox v-model="checked"></van-checkbox>
      <span class="text">Take off clothes</span>
    </div>
    <!-- 确认按钮 -->
    <ComfirmBtn btnName="Generate" :gemsNum="gemsNum" :diamondNum="diamondNum" :isShowDiamond="isShowDiamond"
      @comfrim="generateComfirm" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import HeaderBar from "@/components/HeaderBar.vue";

import image1 from "@/assets/img/stepDetail/pose1.png";
import image2 from "@/assets/img/stepDetail/pose2.png";
import image3 from "@/assets/img/stepDetail/pose3.png";
import image4 from "@/assets/img/stepDetail/pose5.png";
import image5 from "@/assets/img/stepDetail/pose6.png";
import image6 from "@/assets/img/stepDetail/pose7.png";
import image7 from "@/assets/img/stepDetail/pose8.png";

import ComfirmBtn from "@/components/ComfirmBtn.vue";

import api from "@/api";

const gemsNum = ref("");
const diamondNum = ref("100");
const isShowDiamond = ref(true);

const checked = ref(false);

const router = useRouter();

const images = ref([image1, image2, image3, image4, image5, image6, image7]);
// 当前激活的图片索引
const currentIndex = ref(0);

// 轮播切换回调
const onChange = (index) => {
  currentIndex.value = index;
};

const ossUrl = ref('')

// 查询积分余额
const queryBalance = async () => {
  try {
    const res = await api.pointsBalance();
    gemsNum.value = String(res.data.balance);
  } catch (err) {
    console.log(err);
  }
};

const generateComfirm = async () => {
  // 获取选定的图片
  const getCurrentImg = images.value[currentIndex.value]
  console.log('获取到的图片：', getCurrentImg)
  if (ossUrl.value) {
    // if (Number(gemsNum.value) < 100) {
    //    errorMsg.value = "余额不足";
    //    errorShow.value = true;
    //   return;
  }
  // 从本地拿到 ossUrl
  const getOssUrl = sessionStorage.getItem("removeossUrl");
  const params = {
    originFileUrl: getOssUrl,
    taskType: 1,
  };
  try {
    const res = await api.taskSubmit(params);
    router.push({
      path: "/removeCreating",
      query: {
        taskNo: res.data.taskNo,
        from: "remove"
      },
    });
  } catch (err) {
    console.log(err);
    // 错误的时候，提示msg
    //errorMsg.value = err.message;
    //errorShow.value = true;
  }
};

onMounted(() => {
  queryBalance()
});
</script>

<style scoped lang="less">
.ai_pose {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 10px 16px 30px;
  /* 背景图设置 */
  background-image: url("../assets/images/bg_texture@2x.png");
  background-position: top center;
  /* 从顶部开始 */
  background-repeat: no-repeat;
  /* 不重复 */
  background-size: 100% auto;
  /* 宽度满屏，高度自适应 */
  background-color: #fbfbfd;

  .title {
    font-size: 18px;
    color: #000000;
    text-align: center;
    line-height: 22px;
  }

  .swiper_wrap {
    margin-top: 16px;
    margin-bottom: 25px;

    .van-swipe-item {
      box-sizing: border-box;
      padding: 0 4px;

      .image-wrapper {
        width: 100%;
        box-sizing: border-box;

        .swipe-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .activeItemStyle {
      .image-wrapper {
        border: 4px solid #6b77ff;
      }
    }
  }
}
</style>
